<template>
  <div class="container">
    <div class="mine-box flexRow Ycenter">
      <div class="avatar">
        <img
          :src="userInfo.head_img || require('../assets/img/avatar.png')"
          alt
        />
      </div>
      <div>
        <div class="title">{{ userInfo.nickname }}</div>
        <div class="content">{{ userInfo.memo || '这家伙很懒啊' }}</div>
      </div>
    </div>
    <div class="tabs flexRow Xcenter">
      <el-tabs v-model="activeTab" @tab-click="tabChange">
        <el-tab-pane label="我参赛的" name="1"></el-tab-pane>
        <el-tab-pane label="我收藏的" name="2"></el-tab-pane>
        <el-tab-pane label="账户管理" name="3"></el-tab-pane>
      </el-tabs>
    </div>
    <div class="content-box w1420">
      <div v-show="activeTab == 1 || activeTab == 2">
        <div class="btn-group">
          <span
            v-for="(item, index) in categoryList"
            :key="index"
            class="pointer"
            :class="type == item.id ? 'active' : ''"
            @click="typeChange(item.id)"
            >{{ item.name }}</span
          >
        </div>
        <template v-if="list.length == 0">
          <div class="nodata">
            <img src="../assets/img/noData.png" alt />
            <p>OH~这里暂时没有内容</p>
            <el-button type="primary" v-if="activeTab == 1" @click="goto"
              >去参赛</el-button
            >
            <el-button type="primary" v-else @click="goto">探寻宝藏</el-button>
          </div>
        </template>
        <template v-else>
          <div class="list flexWarp">
            <div
              class="item pointer"
              v-for="(item, index) in list"
              :key="index"
              @click="gotoDetail(item.id)"
            >
              <img :src="item.img" alt />
              <div class="content">
                <div class="title">{{ item.project_name }}</div>
                <div class="desc flexRow Xbetween">
                  <span>{{ item.cname }}</span>
                  <span>{{ item.rname }}</span>
                </div>
              </div>
            </div>
          </div>
          <div class="page">
            <el-pagination
              background
              layout="prev, pager, next, jumper"
              prev-text="上一页"
              next-text="下一页"
              :current-page="page"
              :total="total"
              @current-change="handleCurrentChange"
            >
            </el-pagination>
          </div>
        </template>
      </div>
      <div v-show="activeTab == 3">
        <div class="title">关于我们</div>
        <div class="conetnt-part">
          <div class="form flexRow Xbetween">
            <el-form
              label-position="right"
              label-width="126px"
              :model="userInfo"
            >
              <el-form-item
                label="用户昵称："
                style="width: 80%"
                prop="nickname"
              >
                <el-input
                  v-model="userInfo.nickname"
                  placeholder="请输入昵称"
                ></el-input>
              </el-form-item>
              <el-form-item label="年龄：" style="width: 80%" prop="age">
                <el-input
                  v-model="userInfo.age"
                  placeholder="请输入年龄"
                ></el-input>
              </el-form-item>
              <el-form-item label="所在学校：" style="width: 80%" prop="school">
                <el-input
                  v-model="userInfo.school"
                  placeholder="请输入学校"
                ></el-input>
              </el-form-item>
              <el-form-item label="个人介绍：" prop="memo">
                <el-input
                  v-model="userInfo.memo"
                  placeholder="请输入个人介绍"
                ></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="submit">保存</el-button>
              </el-form-item>
            </el-form>
            <div class="upload">
              <img v-if="head_img" :src="head_img" alt="" />
              <Upload
                uploadType="headImg"
                :value.sync="head_img"
                :beforeUploadFun="beforeUploadFun"
              />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { categorySelect, mineList, userInfoEdit } from '../api/mine'
import Upload from '../components/upload'
import { setCookie } from '../utils/auth'
export default {
  components: { Upload },
  data() {
    return {
      activeTab: '1',
      type: '',
      categoryList: [],
      page: 1,
      total: 0,
      list: [],
      head_img: ''
    }
  },
  computed: {
    userInfo: {
      get() {
        const userInfo = this.$store.getters.userInfo
        this.head_img = userInfo.head_img
        return userInfo
      }
    },
    nowReviewId: {
      get() {
        return this.$store.getters.nowReviewId
      }
    },
    activePath: {
      get() {
        return this.$store.state.settings.activePath
      },
      set(val) {
        this.$store.dispatch('settings/changeSetting', {
          key: 'activePath',
          value: val
        })
        setCookie('path', val)
      }
    }
  },
  mounted() {
    this.getCategorySelect()
  },
  methods: {
    tabChange() {
      if (this.activeTab != 3) {
        this.page = 1
        this.getList()
      }
    },
    getCategorySelect() {
      categorySelect().then((res) => {
        this.categoryList = res.data
        if (res.data.length > 0) {
          this.type = res.data[0].id
        }
        this.getList()
      })
    },
    typeChange(type) {
      this.type = type
      this.page = 1
      this.getList()
    },
    getList() {
      let params = {
        page: this.page,
        type: this.activeTab,
        cate_id: this.type
      }
      mineList(params).then((res) => {
        const { data, total } = res.data
        this.list = data
        this.total = total
      })
    },
    handleCurrentChange(val) {
      this.page = val
      this.getList()
    },
    beforeUploadFun(file) {
      let isJPG = false
      if (
        file.type == 'image/jpeg' ||
        file.type == 'image/png' ||
        file.type == 'image/gif'
      ) {
        isJPG = true
      }
      if (!isJPG) {
        this.$message.error('上传图片只能是 JPG/PNG/GIF 格式!')
        return isJPG
      }
      return true
    },
    submit() {
      this.userInfo.head_img = this.head_img
      userInfoEdit(this.userInfo).then((res) => {
        this.$message.success('保存成功')
      })
    },
    goto() {
      if (this.activeTab != 1) {
        this.$router.push({ path: '/review', query: { id: this.nowReviewId } })
        this.activePath = '/review?id=' + this.nowReviewId
      } else {
        this.$router.push({ path: '/apply' })
      }
    },
    gotoDetail(id) {
      this.$router.push({
        path: '/worksDetail',
        query: { id }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  background: #eff1f4;
}
.mine-box {
  width: 100%;
  height: 400px;
  background: url('../assets/img/mine-bg.png') no-repeat center center;
  background-size: cover;
  padding-left: 249px;
  box-sizing: border-box;
  color: #ffffff;
  .avatar {
    background: #ffffff;
    width: 150px;
    height: 150px;
    padding: 7px;
    box-sizing: border-box;
    border-radius: 50%;
    margin-right: 50px;
    img {
      width: 100%;
      height: 100%;
      border-radius: 50%;
    }
  }
  .title {
    font-size: 36px;
    font-weight: 500;
    margin-bottom: 25px;
  }
  .content {
    font-size: 18px;
  }
}

.tabs {
  background-color: #ffffff;

  /**样式重置 */
  /deep/ {
    .el-tabs__nav-wrap::after {
      background-color: transparent;
    }
    .el-tabs__header {
      margin: 0;
    }
    .el-tabs__item {
      height: 100px;
      line-height: 100px;
      font-size: 24px;
      padding: 0 80px;
    }
    .el-tabs__active-bar {
      height: 6px;
    }
  }
}
.content-box {
  padding-top: 32px;
  .btn-group {
    span {
      padding: 8px 11px;
      font-size: 20px;
      color: #999999;
      margin-right: 80px;
      &.active {
        color: #ffffff;
        border-radius: 4px;
        background: #3385ff;
      }
    }
  }
  .list {
    padding: 50px 0 32px;
    .item {
      width: 334px;
      background: #ffffff;
      box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.1);
      margin-left: 28px;
      margin-bottom: 28px;
      &:nth-child(4n + 1) {
        margin-left: 0;
      }
      img {
        width: 100%;
        height: 240px;
      }
      .content {
        padding: 24px 22px;
        .title {
          font-size: 20px;
          color: #262626;
          margin-bottom: 60px;
        }
        .desc {
          font-size: 16px;
          color: #999999;
        }
      }
    }
  }
  .page {
    padding-bottom: 80px;
    text-align: center;
  }
  .nodata {
    padding: 117px 0 120px;
    text-align: center;
    img {
      width: 560px;
      height: 296px;
    }
    p {
      font-size: 20px;
      color: #999999;
      margin: 50px 0 40px;
    }
    .el-button {
      padding: 24px 66px;
      font-size: 22px;
    }
  }
  .title {
    font-size: 20px;
    color: #333333;
    margin-bottom: 40px;
  }
  .conetnt-part {
    background-color: #ffffff;
    padding: 100px;
    .form {
      /deep/ .el-form {
        width: 1000px;
        .el-form-item {
          margin-bottom: 30px;
        }
        .el-form-item__label {
          color: #262626;
          line-height: 72px;
          font-size: 20px;
        }
        .el-input__inner {
          height: 72px;
          font-size: 20px;
        }
        .el-button {
          padding: 25px 56px;
          font-size: 24px;
        }
      }
      .upload {
        img {
          width: 150px;
          height: 150px;
          border-radius: 50%;
          margin-bottom: 40px;
        }
      }
    }
  }
}
</style>